<template>
  <div class="analysis-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="filter-card">
          <template #header>
            <div class="card-header">
              <span>分析条件</span>
            </div>
          </template>
          
          <el-form
            ref="formRef"
            :model="analysisForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="时间范围" prop="timeRange">
              <el-date-picker
                v-model="analysisForm.timeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :disabled-date="disabledDate"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" :loading="loading" @click="handleAnalyze">
                开始分析
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分析结果展示区域 -->
    <el-row :gutter="20" class="analysis-content" v-if="hasAnalysisResult">
      <!-- ... 其他内容 ... -->
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const formRef = ref(null)
const loading = ref(false)

// 定义分析表单数据
const analysisForm = reactive({
  timeRange: [],
})

// 表单验证规则
const rules = {
  timeRange: [
    { 
      required: true, 
      message: '请选择时间范围', 
      trigger: 'change',
      type: 'array'
    }
  ]
}

// 禁用未来日期
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

// 是否有分析结果
const hasAnalysisResult = computed(() => {
  // 根据实际数据判断是否显示结果
  return false
})

// 处理分析请求
const handleAnalyze = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    // 发送分析请求
    await store.dispatch('nutrition/analyze', {
      startDate: analysisForm.timeRange[0],
      endDate: analysisForm.timeRange[1]
    })
    
    ElMessage.success('分析完成')
  } catch (error) {
    console.error('分析失败:', error)
    ElMessage.error(error.message || '分析失败')
  } finally {
    loading.value = false
  }
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
</script>

<style lang="scss" scoped>
.analysis-container {
  padding: 20px;
  
  .filter-card {
    margin-bottom: 20px;
  }
  
  .analysis-content {
    margin-top: 20px;
  }
}
</style> 